<!-- 首页热门职位的职位卡片模块 -->
<!-- 根据传入的workSort的值显示数据 -->
<template>
	<div class="workList">
		<ul class="work_list">
			<li v-for="(info,index) in infoSort" :key="index">
				<div class="info-row" @click="showDetail(info)">
					<div style="display: inline-block;float: left;">
						{{info.title}}
					</div>
					<div style="float: right;padding-right: 50px">
						{{info.updateTime}}
					</div>
				</div>
			</li>
		</ul>

      <el-dialog center :visible.sync='showDialog' height="500px" :append-to-body="false">
        <div class="el-dialog-div">
          <h3 class="el-dialog-title" slot="title">{{infoTitle}}</h3>
          <div style="padding: 5px 10px;height: 500px;overflow: auto;">
            <p class="el-dialog-content" v-html="content"></p>
          </div>
        </div>
      </el-dialog>

	</div>
</template>

<script type="">
	export default{
		data(){
			return{
        showDialog: false,
        infoTitle: '',
        content: '',
			}
		},
		props:['infoSort'],
    methods: {
      async showDetail(info) {
        this.showDialog = true
        this.infoTitle = info.title
        this.content = info.content
        console.log(info.title);
      }
    },
	}
</script>

<style lang="scss">
$nx-color2:#0470B8;
$nx-width:76rem;
.workList{
	width: 100%;
	.work_list{
		width: $nx-width;
		margin: 1rem auto;
		zoom:1;
		&:after{
			display: block;
			content: '.';
			clear: both;
			line-height: 0;
			visibility: hidden;
		}
    .info-row{
      font-style: italic;
      font-weight: lighter;
      height: 40px;
      line-height: 40px;
      text-align: center;
      border-bottom: 1px dashed #ccc;
    }
	}
  .el-dialog-div{
    height: 60vh;
    overflow-x: hidden;

    .el-dialog-title{
      display: block;
      margin: 0 auto;
      line-height: 20px;
      font-weight: bolder;
      height: 20px;
      text-align: center;
    }
    .el-dialog-content{
      line-height: 2;
    }
  }

}
</style>
